<template>
	<view class="u-flex u-flex-wrap u-flex-between" :class="{'list': maxCount > 1}">
		<block v-if="accept == 'video'">
			<view class="u-relative"
				:style="{'margin-top': marginTop + 'rpx', 'width': width + 'rpx', 'height': height + 'rpx'}"
				v-for="(item, index) in newList" :key="index">
				<video class="u-relative" :style="{'width': width + 'rpx', 'height': height + 'rpx'}" :src="item || ''" :poster="item + '?x-oss-process=video/snapshot,t_1,f_jpg'"></video>
				<cover-image class="u-absolute u-w-32 u-h-32 z-index-998" style="top: -15rpx;right: -15rpx;"
					@tap="tapTo('del', index)" :src="$mAssetsPath.index18" v-if="showDel"></cover-image>
			</view>
		</block>
		<view class="u-relative" :style="{'width': width + 'rpx','margin-top': marginTop + 'rpx'}"
			v-for="(item,index) in newList" :key="index" v-else>
			<u-image width="100%" :height="height" :src="item || ''" :radius="borderRadius"></u-image>

			<view class="u-absolute u-font-24 u-bg-F5F5F5 u-b-r-100 u-w-32" style="top: -15rpx;right: -15rpx;"
				@tap="tapTo('del', index)" v-if="showDel">
				<u-image width="100%" height="32" :src="$mAssetsPath.index18"></u-image>
			</view>
		</view>

		<view :style="{'margin-top': marginTop + 'rpx', 'width': width + 'rpx', 'height': height + 'rpx'}"
			v-if="newList.length < maxCount">
			<u-upload :width="width" :height="height" :multiple="true" :maxCount="minCount" :sizeType="['original']"
				:compressed="false" :accept="accept" @afterRead="tapTo('add', $event)">
				<view class="u-m-a u-relative" :style="{'width': width + 'rpx'}">
					<u-image width="100%" :height="height"
						:src="maxCount > 1? (uploadImg || ''): (newList[0] || uploadImg)"></u-image>
				</view>
			</u-upload>
		</view>
	</view>
</template>

<script>
	/**
	 * @description 上传组件
	 * @property {String} uploadImg  自定义上传按钮图片
	 * @property {String || Number} minCount 自定义多选上传数量
	 * @property {String || Number} maxCount 自定义最大上传数量 
	 * @property {Array} list  数组
	 * @property {String || Number} borderRadius 自定义圆角  默认10
	 * @property {String || Number} width  自定义宽度 
	 * @property {String || Number} height  自定义高度 
	 * @property {String || Number} marginTop  自定义间距 
	 * @property {String} accept  接受的文件类型，file只支持H5（只有微信小程序才支持把accept配置为all、media） 
	 */
	export default {
		name: "uni-upload",
		props: {
			uploadImg: {
				type: String,
				default: ''
			},
			minCount: {
				type: [String, Number],
				default: 1
			},
			maxCount: {
				type: [String, Number],
				default: 1
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			listId: {
				type: Array,
				default: () => {
					return []
				}
			},
			borderRadius: {
				type: [String, Number],
				default: 10
			},
			width: {
				type: [String, Number],
				default: 210
			},
			height: {
				type: [String, Number],
				default: 210
			},
			marginTop: {
				type: [String, Number],
				default: 0
			},
			accept: {
				type: String,
				default: 'image'
			},
			showDel: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				newList: this.list,
				newListId: this.listId
			};
		},
		methods: {
			tapTo(state, data) {
				switch (state) {
					case 'add':
						if (this.maxCount > 1) {
							data.file.forEach((item, index) => {
								this.$mUpload(this.accept == 'image'? 1: 2, item, res => {
									res = this.utils.jsonParse(res.data, 1);
									this.newList.push(res.path)
									this.newListId.push(res.id)
									this.$emit('change', {newList: this.newList, newListId: this.newListId})
								})
							})
						} else {
							this.$mUpload(this.accept == 'image'? 1: 2, data.file[0], res => {
								res = this.utils.jsonParse(res.data, 1);
								this.newList = [res.path];
								this.newListId = [res.id];
								this.$emit('change', {newList: this.newList, newListId: this.newListId})
							})
						}
						break
					case 'del':
						let tips;
						if (this.accept == 'image') {
							tips = '是否要删除此图片吗？'
						} else if (this.accept == 'video') {
							tips = '是否要删除此视频吗？'
						}
						uni.showModal({
							content: tips,
							confirmColor: this.themeColor.color,
							success: res => {
								if (res.confirm) {
									this.newList.splice(data, 1)
									this.newListId.splice(data, 1)
									this.$emit('update:list', this.newList)
									this.$emit('update:listId', this.newListId)
								}
							}
						})
						break
					default:
						break
				}
			}
		},
		watch: {
			list(val) {
				this.newList = val;
			},
			listId(val) {
				this.newListId = val;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list::after {
		content: '';
		width: 210rpx;
	}
</style>